import React from 'react'
import { BrowserRouter as Router, Route, Link, NavLink, Redirect, Switch, withRouter } from 'react-router-dom'
import Css from '../style/common.module.css'
import Play from '../img/播放.png'
import Select from '../img/多选框.png'
import Videoplay from '../img/视频播放.png'
import More from '../img/更多.png'

class Danqu extends React.Component {
  constructor() {
    super()
    this.state = {
      arr: []
    }
  }
  componentDidMount() {
    // console.log(this.props)
    let { name } = this.props
    fetch(`http://106.12.79.128:666/search?keywords=${name}`)
      .then(body => body.json())
      .then(res => {
        console.log(res.result.songs)
        this.setState({
          arr: res.result.songs
        })
      })
  }
  // sendId(songid){
  //   const playlistid=this.props.location.playlistid
  //   // const id=this.props.location.id
  //   // console.log(id)
  //   console.log(songid)
  //   console.log(playlistid)

  //   this.props.history.push({pathname:"/song",songid,playlistid})

  // }
  render() {
    return (
      <div>
        <div className={Css.playAll}>
          <div className={Css.left}>
            <img src={Play} alt="" className={Css.playImg} />
            <p className={Css.playP}>播放全部</p>
          </div>
          <div className={Css.right}>
            <img src={Select} alt="" className={Css.selectImg} />
            <p className={Css.selectAll}>多选</p>
          </div>
        </div>

        {this.state.arr.map((item, index) => {
          return (
            <Link to={`/Findsong?ids=${item.id}`} key={index}>
              <div className={Css.song} >
                <div className={Css.songLeft}>
                  <p className={Css.name1}>{item.name}</p>
                  <p className={Css.name2}>{item.artists[0].name}{item.alias ? '' : '-'}{item.alias}</p>
                </div>
                <div className={Css.songRight}>
                  <img src={Videoplay} alt="" className={Css.videoImg} />
                  <img src={More} alt="" className={Css.moreImg} />
                </div>
              </div>
            </Link>
          )
        })
        }


        {/* <div className={Css.song}>
                <div className={Css.songLeft}>
                  <p className={Css.name1}>海阔天空</p>
                  <p className={Css.name2}>海阔天空</p>
                </div>
                <div className={Css.songRight}>
                  <img src={Videoplay} alt="" className={Css.videoImg}/>
                  <img src={More} alt="" className={Css.moreImg}/>
                </div>
              </div> */}

      </div>


    );
  }
}

export default Danqu